<template>
    <div id="order_user">
        <div class="bread">
            <ul>
                <li :class="{'active':tabActive>=0}" @click="tabOpen(0)"><img alt="" src="~@/assets/img/u1489.png">基本信息填写<span></span></li>
                <li :class="{'active':tabActive>=1}" @click="tabOpen(1)"><img src="~@/assets/img/u1483.png" alt="">品类版型选择<span></span></li>
                <li :class="{'active':tabActive>=2}" @click="tabOpen(2)"><img src="~@/assets/img/u1506.png" alt="">面料与辅料<span></span></li>
                <li :class="{'active':tabActive>=3}" @click="tabOpen(3)"><img src="~@/assets/img/u1495.png" alt="">服装类别和工艺<span></span></li>
                <li :class="{'active':tabActive>=4}" @click="tabOpen(4)"><img src="~@/assets/img/u1512.png" alt="">绣字和撞色<span></span></li>
                <li :class="{'active':tabActive>=5}" @click="tabOpen(5)"><img src="~@/assets/img/u1501.png" alt="">量体信息</li>
            </ul>
        </div>

        <div class="contents">
            <!--基本信息填写-->
            <Tabs1 v-show="tabActive == 0"></Tabs1>
            <!--基本信息填写-->

            <!--品类版型选择-->
            <Tabs2 v-show="tabActive == 1" :switch="tabActive"></Tabs2>
            <!--品类版型选择-->

            <!--面料与辅料-->
            <Tabs3 v-show="tabActive == 2"></Tabs3>
            <!--面料与辅料-->

            <!--服装类别和工艺-->
            <Tabs4 v-show="tabActive == 3" :switch="tabActive"></Tabs4>
            <!--服装类别和工艺-->

            <!--绣字和撞色-->
            <Tabs5 v-show="tabActive == 4" :switch="tabActive"></Tabs5>
            <!--绣字和撞色-->

            <!--量体信息-->
            <Tabs6 v-show="tabActive == 5" :switch="tabActive"></Tabs6>
            <!--量体信息-->
        </div>
        <!--产品列表-->
        <Orderlist></Orderlist>
        <!--产品列表-->
        <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>是否保存当前信息</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="noSave">不保存</el-button>
            <el-button type="primary" @click="saves">保存</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import Orderlist from './list';
import Tabs1 from './tabs1';
import Tabs2 from './tabs2';
import Tabs3 from './tabs3';
import Tabs4 from './tabs4';
import Tabs5 from './tabs5';
import Tabs6 from './tabs6';
export default {
    data() {
        return{
            tabPosition:'left',
            button_list_on: true,//底部按钮组件
            tabActive: 0,//当前导航栏类别激活
            jishi: '',//计时更新产品
            dialogVisible: false,
        }
    },
    created() {
        if(this.$store.state.OrderUser.Order_user_InfoData == undefined || JSON.stringify(this.$store.state.OrderUser.Order_user_InfoData) === '{}') {
            location.href = '/';
        }
        //#region 计时更新产品
        this.jishi = setInterval(() => {
            if(this.$store.state.OrderUser.isType == 0) {
                this.$store.commit('postOrder_user_product_update',0);
                this.$message.success("订单已自动保存")
            }else if(this.$store.state.OrderUser.isType == 1) {
                // this.$store.commit('postOrder_user_product_update',0);
                this.$store.commit('saveOrderUserTemplate');
                this.$message.success("订单已自动保存")
            }
        }, 60 * 1000 * 3);

    },
    mounted() {
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
    },
    methods:{
        tabOpen(num){
            this.tabActive = num;
        },
        handleClose(done) {
            done();
        },
        goBack() {
            // this.dialogVisible = true;
            this.$router.replace({
                path:'/',
                name:'home'
            })
        },
        noSave() {
            location.href = '/';
        },
        saves() {
            if(this.$store.state.OrderUser.isType == 0) {
                this.$store.commit('postOrder_user_product_update',0);
            }else if(this.$store.state.OrderUser.isType == 1) {
                this.$store.commit('postOrder_user_product_update',0);
                this.$store.commit('saveOrderUserTemplate');
            }
            location.href = '/';
        }
    },
    destroyed() {
        window.clearInterval(this.jishi);
        window.removeEventListener('popstate', this.goBack, false);
    },
    computed: {
        getChecked() {
            return this.$store.state.OrderUser.Order_user_Info_temp.id;
        }
    },
    watch: {
        getChecked() {
            this.tabActive = 1;
        }
    },
    components:{Orderlist,Tabs1,Tabs2,Tabs3,Tabs4,Tabs5,Tabs6},
}
</script>

<style scoped lang="scss">
.bread{background: #ffffff; padding-left: 60px; height: 80px; line-height: 80px; color: #000000;}
.bread li{display: inline-block; font-size: 14px;opacity:0.2; cursor: pointer;}
.bread li.active{opacity:1;}
.bread li img{width: 30px; margin:0 10px; vertical-align: middle; color: #cccccc; display: inherit;}
.bread li span{width: 50px; height: 4px; margin-left:5px; border-top: 1px solid #000000; display: inline-block;}
.contents{ background: #ffffff; margin-top: 20px; padding: 30px 20px;}

#Button_list{position: relative; height: 70px; background: #ffffff; font-size: 14px;}
#Button_list div,#Button_list ul{position: absolute; top: 0;left:-400px;}
#Button_list div.open,#Button_list ul.open{left:0;}
#Button_list div{cursor: pointer;transition: all .7s ease-out;}
#Button_list ul{display: flex; flex-flow: wrap;align-items: center; text-align: center;
    transition: all .7s ease-out;left: -500px; visibility: hidden;
}
#Button_list ul li{ width: 80px; cursor: pointer;}
#Button_list ul li:first-child{text-align: left; width: 70px;}

#order_user /deep/ .el-tabs__header{margin-left: 20px;}/*tabs-左边距*/
#order_user /deep/ .el-radio-group label{ margin-right: 20px;}

#order_user /deep/ .input_search{ margin-bottom: 20px; width: 400px;}

/*tabs2,tabs4通用el-radio样式*/
/deep/ .order_tabs-pane .el-radio-button__inner{border:none;}
#order_user /deep/ .el-tab-pane{margin-left: 10px;}
#order_user /deep/ .order_tabs-pane .el-radio-group label{ margin-bottom: 20px;box-shadow:none;}
#order_user /deep/ .order_tabs-pane .el-radio-group label img{ width: 90px; height: 140px; margin: 0 auto 10px auto;}
#order_user /deep/ .order_tabs-pane .el-radio-group label span{ width: 150px;border: 1px solid #DCDFE6;}
#order_user /deep/ .order_tabs-pane .el-radio-button__inner strong{
    font-weight: inherit; background: #EAEAEA; padding: 3px 12px; border-radius: 5px;}
#order_user /deep/ .order_tabs-pane .el-radio-button__orig-radio:checked + .el-radio-button__inner strong{background: $color; font-weight: bold;}

#order_user /deep/ .order_tabs-pane .el-radio-button__inner{padding:20px 0; border:none;}
#order_user /deep/ .order_tabs-pane .el-radio-group input[type=radio]:checked + .el-radio-button__inner{
    box-shadow:none; background: #ffffff; border-color:$color; color: $font_color;}
</style>
